<style>
.img-ivu-modal .ivu-modal{
  width: 1366px !important;
}
</style>

<template>
<div>
  <Card :bordered="false" dis-hover>
    <div class="behind-wrapper">
      <div class="content-wrapper">
        <div class="button-group" v-show="false">
          <a><i class="iconfont icon-head-save"></i>保存</a>
          <a><i class="iconfont icon-head-add"></i>新增</a>
          <a><i class="iconfont icon-head-release"></i>发布</a>
          <a><i class="iconfont icon-dump"></i>删除</a>
        </div>
        <div class="page-content">
          <div class="block-content">
            <h2 class="behind-title">
              <i class="iconfont icon-cm-info"></i>基本资料
              <div class="title-btn fr">
                <a @click="SaveLogistic"><i class="iconfont icon-head-save"></i>保存</a>
              </div>
              </h2>
            <div class="c-line">
              <div class="w-50">
                <div class="text-input displayflex">
                  <span class="flexitem">在线仓储面积</span>
                  <div class="flex1">
                    <input type="text" v-model="Logistic.value.Area" placeholder="">
                  </div>
                  <i class="flexitem">㎡</i>
                </div>
              </div>
              <div class="w-50">
                <div class="text-input displayflex">
                  <span class="flexitem">覆盖城市</span>
                  <div class="flex1">
                    <input type="text" v-model="Logistic.value.City" placeholder="">
                  </div>
                  <i class="flexitem">㎡</i>
                </div>
              </div>
            </div>
          </div>
          <div class="block-content">
            <h2 class="behind-title">
              <i class="iconfont icon-cm-img"></i>广告图片信息
              <span class="tips">注：请上传1920*550大小的图片</span>
              <div class="title-btn fr">
                <a @click="SaveBanners"><i class="iconfont icon-head-save"></i>保存</a>
              </div>
            </h2>
            <div class="c-line">
              <div class="w-25">
                <div class="img-box rela-img">
                  <img :src="banners[0].original.url" alt="">
                </div>
                <div class="license-btn">
                  <Upload type="drag"
                    ref="upload"
                    :accept="imageFilters"
                    :data="{position:0}"
                    :action="uploadAction"
                    :on-success="OnUploadSuccess"
                    :on-format-error="handleFormatError"
                    :format="['jpg','jpeg','png']"
                    class="uploadcla">
                    <span class="iconfont icon-cm-file" title="修改"></span>
                  </Upload>
                  <span class="iconfont icon-search" title="放大" @click="handleView(banners[0])"></span>
                  <span class="iconfont icon-dump" title="删除" @click="handleRemove(banners[0])"></span>
                </div>
              </div>
              <div class="w-25">
                <div class="img-box rela-img">
                  <img :src="banners[1].original.url" alt="">
                </div>
                <div class="license-btn">
                  <Upload type="drag"
                    ref="upload"
                    :accept="imageFilters"
                    :data="{position:1}"
                    :action="uploadAction"
                    :on-success="OnUploadSuccess"
                    :on-format-error="handleFormatError"
                    :format="['jpg','jpeg','png']"
                    class="uploadcla">
                    <span class="iconfont icon-cm-file" title="修改"></span>
                  </Upload>
                  <span class="iconfont icon-search" title="放大" @click="handleView(banners[1])"></span>
                  <span class="iconfont icon-dump" title="删除" @click="handleRemove(banners[1])"></span>
                </div>
              </div>
              <div class="w-25">
                <div class="img-box rela-img">
                  <img :src="banners[2].original.url" alt="">
                </div>
                <div class="license-btn">
                  <Upload type="drag"
                    ref="upload"
                    :accept="imageFilters"
                    :data="{position:2}"
                    :action="uploadAction"
                    :on-success="OnUploadSuccess"
                    :on-format-error="handleFormatError"
                    :format="['jpg','jpeg','png']"
                    class="uploadcla">
                    <span class="iconfont icon-cm-file" title="修改"></span>
                  </Upload>
                  <span class="iconfont icon-search" title="放大" @click="handleView(banners[2])"></span>
                  <span class="iconfont icon-dump" title="删除" @click="handleRemove(banners[2])"></span>
                </div>
              </div>
              <div class="w-25">
                <div class="img-box rela-img">
                  <img :src="banners[3].original.url" alt="">
                </div>
                <div class="license-btn">
                  <Upload type="drag"
                    ref="upload"
                    :accept="imageFilters"
                    :data="{position:3}"
                    :action="uploadAction"
                    :on-success="OnUploadSuccess"
                    :on-format-error="handleFormatError"
                    :format="['jpg','jpeg','png']"
                    class="uploadcla">
                    <span class="iconfont icon-cm-file" title="修改"></span>
                  </Upload>
                  <span class="iconfont icon-search" title="放大" @click="handleView(banners[3])"></span>
                  <span class="iconfont icon-dump" title="删除" @click="handleRemove(banners[3])"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Card>
  <Modal title="查看图片" v-model="visible" class="img-ivu-modal">
      <img :src="imgName" v-if="visible" style="width: 100%">
  </Modal>
</div>
</template>

<script>
export default {
  data() {
    return {
      Logistic: {
        name: "Logistic",
        value: {
          Area: null,
          City: null
        }
      },
      imgName: "",
      visible: false,
      banners: [{
          original: {
            url: '',
            name: ''
          }
        },
        {
          original: {
            url: '',
            name: ''
          }
        },
        {
          original: {
            url: '',
            name: ''
          }
        },
        {
          original: {
            url: '',
            name: ''
          }
        }
      ],
      uploadAction: "/api/file/upload/single",
      imageFilters: "image/*",
      viewImageVisible: false
    }
  },
  mounted() {
    this.GetLogistic();
    this.GetBanners();
  },
  methods: {
    GetLogistic() {
      this.axios.get("/api/alliance/list?name=Logistic").then(res => {
        if (res.success && res.datas.length > 0) {
          this.Logistic.value = JSON.parse(res.datas[0].Value || "null");
        }
      });
    },
    SaveLogistic() {
      this.axios
        .post("/api/alliance/save", {
          name: this.Logistic.name,
          value: JSON.stringify(this.Logistic.value)
        })
        .then(res => {
          if (res.sucess) {
            this.$Notice.success({
              title: "提示",
              desc: "保存成功！"
            });
          }
        });
    },
    handleView(name) {
      if (!name) {
        this.$Notice.warning({
          title: "提示",
          desc: "未上传图片！"
        });

        return;
      }

      this.imgName = name.original.url;
      this.visible = true;
    },
    handleRemove(banner) {
      banner.original.url = '';
    },
    OnUploadSuccess(response) {
      this.banners[response.fields.position].original = response.file.original;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc: "文件 " + file.name + " 格式不正确，请上传 jpg 或 png 格式的图片。"
      });
    },
    GetBanners() {
      this.axios.get("/api/alliance/list?name=Banners").then(res => {
        if (res.success && res.datas.length > 0) {
          let banners = JSON.parse(res.datas[0].Value || "null");

          for (let index = 0; index < 4; index++) {
            if (banners[index] && banners[index].original) {
              this.banners[index].original = banners[index].original;
            }
          };
        }
      });
    },
    SaveBanners() {
      this.axios
        .post("/api/alliance/save", {
          name: 'Banners',
          value: JSON.stringify(this.banners.map(b=>{
            if(b.original.url){
              return b;
            }

            return null;
          }))
        })
        .then(res => {
          if (res.sucess) {
            this.$Notice.success({
              title: "提示",
              desc: "保存成功！"
            });
          }
        });
    },
  }
}
</script>